// web/src/components/learn/course-progress.tsx
import React from 'react';
import {Progress} from "@/components/ui/progress";
import {cn} from "@/lib/utils";

interface Props {
    value: number
    variant?: 'default' | 'success'
    size?: 'default' | 'sm'
}

const colorByVariant = {
    default: 'text-sky-700',
    success: 'text-emerald-700',
}
const sizeByVariant = {
    default: 'text-sm',
    success: 'text-xs',
}

const CourseProgress = ({value, size, variant}: Props) => {
    return (
        <div>
            <Progress
                variant={variant}
                className={`h-2`}
                value={value}
            />
            <p className={cn(
                `font-medium mt-2 text-sky-700`,
                // @ts-ignore
                colorByVariant[variant | 'default'],
                // @ts-ignore
                sizeByVariant[variant | 'default']
            )}>
                {Math.round(value)}% Complete
            </p>
        </div>
    );
};

export default CourseProgress;